<!--直播页面-->
<template>
    <div>
        <div class="player">
            <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
            </video-player>
        </div>
        <canvas id="canvas" width="375" height="667"></canvas>
        <div class="studio">
            <div class="studio_man">
                <van-row>
                    <van-col span="12">
                        <div class="follow">
                            <van-image width="38" height="38" round
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            <p>瓜夕夕店</p>
                            <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)">关注</van-button>
                        </div>
                    </van-col>
                    <van-col span="7">
                        <ul class="studio_ul">
                            <li class="studio_li">
                                <van-image width="30" height="30" round
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            </li>
                            <li class="studio_li">
                                <van-image width="30" height="30" round
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            </li>
                            <li class="studio_li">
                                <van-image width="30" height="30" round
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            </li>
                            <li class="studio_li">
                                <van-image width="30" height="30" round
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            </li>
                        </ul>
                    </van-col>
                    <van-col span="3">
                        <div class="studio_people" id="userNumber">0</div>
                    </van-col>
                    <van-col span="2">
                        <van-icon class="close" size="25" name="cross" color="#F0F0F0" @click="studioClose"/>
                    </van-col>
                </van-row>
            </div>
            <div class="studio_scoket" id="studio-list">
                <ul id="chart-list">
                    <!-- 这里放发送来的弹幕，在下面创建 -->
                </ul>
            </div>
            <div class="studio_foot">
                <van-row>
                    <van-col span="11">
                        <div>
                            <van-field id="message" class="myinput" v-model="val" placeholder="说点什么..." @keyup.enter="sendOut"/>
                        </div>
                    </van-col>
                    <van-col span="3">
                        <div>
                            <van-icon class="myicon" size="25"  color="#FF4A10" name="shopping-cart" />
                        </div>
                    </van-col>
                    <van-col span="3">
                        <div>
                            <van-icon class="myicon" size="25" name="like" color="#FA2E3B"/>
                        </div>
                    </van-col>
                    <van-col span="3">
                        <div>
                            <van-icon class="myicon" size="25" name="share" color="#F0F0F0"/>
                        </div>
                    </van-col>
                    <van-col span="3">
                        <div>
                            <van-icon class="myicon" size="25" name="wap-nav" color="#F0F0F0"/>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'play',
    data() {
        return {
            val:'',
            playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '9:16', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        withCredentials: false,
                        type: "application/x-mpegURL", //播放类型，如果为rtmp配置为rtmp/mp4
                        src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" //直播流地址
                    }],
                    poster: "../assets/bj5.jpeg", //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true //全屏按钮
                    }
                }
        }
    },
    sockets:{
        //直播间人数
        count_updated(data){
            // 更新直播间上的人数
            // 更新人数span标签的innerHTML即可
            let userNumber=document.getElementById("userNumber")
            userNumber.innerHTML=data;
        },
        //接收服务端发来的消息
        sendtext(data){
            //把data显示在弹幕列表的末尾
            let chatlist=document.getElementById('chart-list');
            //创建一个li
            let li=document.createElement("li");
            li.innerHTML=`<p><span>${this.$store.state.username}：</span>${data}</p>`;
            chatlist.appendChild(li);
            //使滚动条一直在底部
            let studiolist=document.getElementById("studio-list")
            studiolist.scrollTop = studiolist.scrollHeight;
        },
        //告诉所有人有用户加入了直播间
        adduser(data){
            let chatlist=document.getElementById('chart-list');
            let li=document.createElement("li");
            li.innerHTML=`<li><p><span>${data.username}来了</span></p></li>`;
            chatlist.appendChild(li);
            //使滚动条一直在底部
            let studiolist=document.getElementById("studio-list")
            studiolist.scrollTop = studiolist.scrollHeight;
        },
        //告诉所有人有用户退出了直播间
        outuser(data){
            let chatlist=document.getElementById('chart-list');
            let li=document.createElement("li");
            li.innerHTML=`<li><p><span>${data.username}退出了直播间</span></p></li>`;
            chatlist.appendChild(li);
            //使滚动条一直在底部
            let studiolist=document.getElementById("studio-list")
            studiolist.scrollTop = studiolist.scrollHeight;
        },
    },
    mounted() {
        //发送进入直播间的姓名
        this.$socket.emit("userlist",{
            username:this.$store.state.username,
        });
        ! function(e, t, a) {
            function n() {
                c(
                    ".heart{width: 20px;height: 20px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -10px;}.heart:before{left: -10px;}"
                ), o(), r()
            }

            function r() {
                for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e]
                    .scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" +
                    d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color +
                    ";z-index:99999");
                requestAnimationFrame(r)
            }

            function o() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function(e) {
                    t && t(), i(e)
                }
            }

            function i(e) {
                var a = t.createElement("div");
                a.className = "heart", d.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: s()
                }), t.body.appendChild(a)
            }

            function c(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }

            function s() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            }
            var d = [];
            e.requestAnimationFrame = function() {
                return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame ||
                    e.msRequestAnimationFrame || function(e) {
                        setTimeout(e, 1e3 / 60)
                    }
            }(), n()
        }(window, document);
    },
    methods:{
        //退出直播间时
        studioClose(){
            this.$socket.emit("dislive",{username:this.$store.state.username})
            this.$router.push("/live")
        },
        //发送消息给服务端时
        sendOut(){
            if(this.val.trim()!==""){
                this.$socket.emit('sendMsg',this.val);
                this.val='';
                message.focus();  //输入完后继续获得焦点
          }
        }

    },
}
</script>

<style>
#canvas{
    width: 375px;
    height: 667px;
    position: absolute;
    top: 0;
    left: 0;
}

.studio .studio_man{
    width: 95%;
    height: 40px;
    position: fixed;
    top: 10px;
}

.studio .studio_man .follow{
    display: flex;
    margin: 0 5px;
    background-color: rgba(156, 155, 155, 0.6);
    border-radius: 18px;
}

.studio .studio_man .follow p{
    font-size: 8px;
    line-height: 40px;
    padding: 0 5px;
}
.studio .studio_man .follow button{
    font-size: 8px;
    padding: 0 3px;
    height: 30px;
    width: 55px;
    margin-top: 5px;
}

.studio .studio_man .studio_ul{
    display: flex;
    margin-top: 5px;
    overflow: auto;
}

.studio .studio_man .studio_ul .studio_li{
    margin-left: 2px;
    width: 100%;
}

.studio .studio_man .studio_people{
    background: rgba(156, 155, 155, 0.6);
    border-radius: 15px;
    margin: 8px 0 5px 5px;
    line-height: 25px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.studio .studio_man .close{
    margin: 10px;
    text-align: center;
    width: 100%;
}

.studio .studio_scoket{
    position: fixed;
    height: 250px;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 10px;
    overflow-y:scroll;
}

.studio .studio_scoket ul li{
    max-width: 70%;
    margin-bottom: 5px; 
}

.studio .studio_scoket ul li span{
    color: #FBF41E;
    font-size: 16px;
}
.studio .studio_scoket ul li p{
    background: rgba(156, 155, 155, 0.4);
    line-height: 1.2em;
    border-radius: 10px;
    padding:5px 8px;
    font-size: 16px;
    display: inline-block;
    color: aliceblue;
}

.studio .studio_foot div>:nth-child(1){
    background-color: rgba(156, 155, 155, 0.4);
    border-radius: 15px;
    box-sizing: border-box;
    margin: 0 5px;
}

.studio .studio_foot .myinput{
    padding: 0;
    background:none !important; 
    color: #fff;
    font-size: 16px;
}


.studio .studio_foot .myicon{
    background: none !important;
}
.studio .studio_foot{
    position: fixed;
    height: 30px;
    padding:5px; 
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
